﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShareLocation.aspx.cs" Inherits="speech.ShareLocation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Share Location</title>
    <link rel="stylesheet" href="CSS/CornersAndButtons.css"/>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
   
</head>
<body  onload="initialize()">
   
   <div id="map_canvas" style="float:left;margin-left:75px;margin-right:20px;width:45%; height:500px;"></div>
    <div id="pano" style="width: 45%;height:500px"></div>


    <div id="Error" class="ui-widget" style="width:600px;margin-left:auto;margin-right:auto;display:none">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
		<strong id ="check">Alert:</strong></p></div></div>


    <br />
    <div style="text-align:center">
    <html5:TextInput id="latitude" class="corners" runat="server" PlaceHolderText ="Enter Latitude" Required=true Width="200px" Height="50px" Font-Bold=true Font-Size=Large></html5:TextInput>
     <html5:TextInput id="longtitude" class="corners" runat="server" PlaceHolderText ="Enter Longtitude" Required=true Width="200px" Height="50px" Font-Bold=true Font-Size=Large></html5:TextInput>
      <br /><br />
        <input id="submitCoordinates" class="button" type="button" value="Get Location" onclick="updateLocation()"  /><br />
         <a href="HomePage.aspx">Visit Street Speak</a>
</div>
</body>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places,weather&sensor=false"></script>  
   
   <script type="text/javascript">
       var sv = new google.maps.StreetViewService();
       var map, mapPosition, mapOptions, panoramaOptions, panorama;
       function initialize() {

           mapPosition = new google.maps.LatLng(53.34876, -6.25972);
           mapOptions =
            {
                center: mapPosition,                             //object which stores the original map settings
                zoom: 7,
                mapTypeId: 'roadmap',
                streetViewControl: true

            };
           map = new google.maps.Map(
            document.getElementById('map_canvas'), mapOptions);

           map.setTilt(45);




           panoramaOptions =
            {
                position: mapPosition,
                pov:
                {
                    heading: 20,
                    pitch: 10,
                    zoom: 1
                }
            };

           panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
           map.setStreetView(panorama);
       }
       function initialized(lat, long) 
       {

           mapPosition = new google.maps.LatLng(lat, long);
           sv.getPanoramaByLocation(mapPosition, 50, processSVData);

       }

       function updateLocation() {
           var lat = document.getElementById("latitude").value;
           var long = document.getElementById("longtitude").value;

           initialized(lat, long);

       }
       function processSVData(data, status) {
           if (status == google.maps.StreetViewStatus.OK) {
               map.setCenter(mapPosition);
               panorama.setPosition(mapPosition);
           }
           else {

               $("#check").append("<strong>Street View Does Not Have These Co-ordinates</strong>");
               $("#Error").show().delay(4000).fadeOut();
           }

       }
     
    </script>
   

</html>


